<template>
  <div class="container">
      <outerBox title="知识点">
        <div v-if="list.tagList">
        <el-tag :key="t"
        class="mar"
        v-for="(item , t ) in  list.tagList">{{item.tagName}}</el-tag>
        </div>
      </outerBox>
      <outerBox title="重点内容">
          <div v-if="importTagList.length">
          <el-tag :key="t" class="mar"
          v-for="(item , t ) in  importTagList">{{item.tagName}}</el-tag>
          </div>
      </outerBox>
    <div  class="standardMode ov">
      <outerBox title="课堂录屏">

        <div v-if="info.fileIds" class="block imgbox marginT30 t-center">
          <video :key="v" v-for="(item ,v) in  info.fileIds" :src="item" class="fileBg"  controls="controls">
          </video>
        </div>

      </outerBox>
       <!-- <outerBox title="精彩片段">
         <div class="marginL10" v-if="list.fragments">
           <video  v-for="(item ,v) in  info.fileIds"
           :key="v"
            :src="item" class="fileImg"
            style="width:300px;height: 180px;" controls="controls">
           </video>
           <el-image :src="file in list.fragments.split(',')" alt="" />
         </div>
      </outerBox> -->
    </div>

  </div>
</template>

<script>

  import outerBox from '@/components/outerBox'
  import {
    getTemplate,saveResCourseVideo
  } from '@/api/createResult'
  // import DPlayer from '@/components/DPlayer'
  export default {
    name: 'CourseVideoInfo',
    components: {
      outerBox,
    },
    data() {
      return {
        importTagList: [],
        info:{
          filesId:[],//参考资料文件URl
          referVal:'',
          templateWocUrl:''
        },

      }
    },
    watch:{
      list:{
        handler:function(val){
        this.fetchData()
      },
      immediate:true
      }
    },
    created() {

    },
    mounted() {
      //
    },
    props:{
    list:{
      type:[Object,Array],
    	default:[]
      },
    teachingDesignResId:{
      default:'',
    },
    },
    computed: {
      teachingDesignId() {
        return this.$store.state.uploadLessonPlan.teachingPlanId
      },
    },
    methods: {
      fetchData(){
        let {list,info,idGetTagList} = this
        if(list.files) {
           info.fileIds = list.files.split(',')
        }else{
          info.fileIds =''
        }
        this.importTagList=idGetTagList(list.tagList)
        console.log("warseList",this.importTagList)
      },
      idGetTagList(taglist) {
        let newTages = []
        //
        if (!taglist) return newTages;
        if(!taglist.filter(item=>Boolean(item.tagId)===true).length) return taglist;
        if (Array.isArray(taglist)) {
          taglist.forEach(tag => {
            let b = {}
            b[tag['tagName']] = []
            console.log('d919174106b3951f tag sdsd',tag)
            for (let tagsId in tag.tags) {
              let tagsName = tag.tags[tagsId]
              b[tag['tagName']].push({
                tagsId,
                tagsName
              })
            }
            newTages.push(b)
          })
        }
        return newTages
      },
    }

  }
</script>
<style lang="scss">

</style>
<style lang="scss" scoped>
  .container {
    .fileBg{height:360px;width:1054px;margin:20px auto;}
  }
</style>
